<template>
  <div id="app">
  
    <m-header></m-header>
    
    <div class="main">
        <div class="l_nav">
            <ul>
                <router-link to='/user' tag="li">用户管理</router-link>
                <router-link to='/permiss' tag="li">权限管理</router-link>
                <router-link to='/goods' tag="li">商品管理</router-link>
                <router-link to='/shoplist' tag="li">订单管理</router-link>
                <router-link to='/seting' tag="li">系统设置</router-link>
            </ul>
        </div>
        <div class="content">
           
          
            <keep-alive>
              <transition enter-active-class="animate__bounceIn" mode="out-in" >
                  <router-view></router-view>
                  
              </transition>  
            </keep-alive>
            <router-view name="aside"></router-view>
        </div>
    </div>
    <m-footer></m-footer>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

import mHeader from './components/header.vue'
import mFooter from './components/footer.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
    mHeader,mFooter
  },
  data(){
    return{
    }
  }
}
</script>

<style>
   *{
    margin: 0;
    padding: 0;
    }


ul{
    list-style: none;
}
.main:after{
    content: '';
    display: block;
    clear: both;;
}
.main{
    height: 500px;
    
}
.l_nav{
    height: 100%;
    float: left;
    width: 30%;
    text-align: center;
    font-size: 18px;
    line-height: 40px;
    background-color: darkslategrey;
}
.l_nav li{
    border-bottom: 1px solid #fff;
    background-color: gray;
    color: #fff;
    cursor: pointer;
} 
.l_nav li:hover{
    opacity: 0.7;
}
.l_nav li.active{
  opacity: 0.7;
}
.content{
    width: 70%;
    box-sizing: border-box;
    padding: 0 20px;
    float: left;
}
.content table{
    border-collapse: collapse;
    width: 100%;
    text-align: center;   
    line-height: 35px;
}
.content table caption{
    font-size: 20px;
    font-weight: bold;
    line-height: 80px;
}
.content table thead{
    background-color: #ccc;
}
</style>
